<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-input/paper-input.html">
<link rel="import" href="/components/core-input/core-input.html">
<link rel="import" href="/components/sortable-table/sortable-table.html">
<link rel="import" href="/a/elements/nav_components/nav-panel.html">
<link rel="import" href="/a/elements/utility/ajax-service.html">
<link rel="import" href="/a/elements/utility/ajax-button.html">
<link rel="import" href="/a/elements/utility/link-button.html">

<polymer-element name="show-users">
    <template>
        <link rel="stylesheet" type="text/css" href="/assets/main.css" shim-shadowdom>
        <style>
            sortable-table::shadow td.column-id {
                width: 10%;
            }

            sortable-table::shadow td.column-email {
                width: 20%;
            }

            sortable-table::shadow td.column-isAdmin {
                width: 10%;
            }

            sortable-table::shadow td.column-remark {
                width: 30%;
                text-align: left;
            }

            sortable-table::shadow td.column-operation {
                width: 30%;
            }
        </style>
        <nav-panel>
            <span tool>Users list</span>
            <div id="main_panel">
                <div id="header">
                    <link-button label="Add User" href="/admin/users/new?mode=new" raisedButton></link-button>
                    <div id="search">
                        <core-input placeholder="search a user" value="{{info.key}}"></core-input>
                        <paper-button label="Search" raisedButton on-click="{{search_click}}"></paper-button>
                    </div>
                </div>
                <ajax-service id="ajax" url="/admin/users/search" params="{{info}}" on-core-response="{{usersResponse}}"
                              handleAs="json" method="post"></ajax-service>
                <sortable-table id="usersListTable" defaultStyle footerTemplate="{{footerTml}}" page="1"
                                pageSize="{{page_size}}" on-del-response="{{del_response}}" on-request-page="{{users_callback}}"
                                sortColumn="id" data="{{users}}" datalen="{{datalen}}" curPage="{{curPage}}">
                    <sortable-column name="id">ID</sortable-column>
                    <sortable-column name="email">Email</sortable-column>
                    <sortable-column name="isAdmin">IsAdmin</sortable-column>
                    <sortable-column name="remark">Remark</sortable-column>
                    <sortable-column name="operation" cellTemplate="operationTemplate">Operation</sortable-column>
                    <template id="operationTemplate">
                        <td align="center" style="padding-top: 6px">
                            <link-button label="Show" raisedButton
                                         href="/admin/users/{{row.id}}?mode=show"></link-button>
                            <link-button label="Edit" raisedButton
                                         href="/admin/users/{{row.id}}?mode=edit"
                                         style="margin: 0 15px"></link-button>
                            <ajax-button label="Delete" url="/admin/users/{{row.id}}" method="delete"
                                         on-ab-response="{{delResponse}}"></ajax-button>
                        </td>
                    </template>
                </sortable-table>
            </div>
        </nav-panel>
    </template>
    <script>
        Polymer('show-users', {
            created: function () {
                this.users = [];
                this.info = {};
                this.page_size = 3;
            },
            footerTml: "",
            datalen: 0,
            curPage: 1,

            ready: function () {
                document.title = "Users list";
                this.info.pageSize = this.page_size.toString();
                if(localStorage.search_key){
                    this.info.key = localStorage.search_key;
                }else{
                    this.info.key = "";
                    localStorage.search_key = this.info.key;
                }
                if(localStorage.page){
                    this.info.page = localStorage.page;
                }else{
                    this.info.page = "1";
                    localStorage.page = this.info.page;
                }
                this.$.ajax.go();
            },

            users_callback: function(e){
                this.info.page = e.detail;
                localStorage.page = this.info.page;
                this.$.ajax.go();
            },

            usersChanged: function () {
                this.footerTml = this.users.length > 0 ? "myFooterPaging" : "";
            },
            usersResponse: function () {
                var res = this.$.ajax.response;
                if (res&&res.user) {
                    this.datalen = res.size;
                    this.users = res.user;
                    this.curPage = Number(this.info.page);
                } else {
                    this.users = [];
                }
            },
            search_click: function () {
                this.info.page = "1";
                localStorage.page = "1";
                localStorage.search_key = this.info.key;
                this.$.ajax.go();
            },
            del_response: function(){
                this.$.ajax.go();
            }
        });
    </script>
</polymer-element>